<template>
  <div class="userGuideCard" ref="userGuideCardRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title"  :titleSlide="titleSlide"></header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <div class="detail-body">
        <detail-card></detail-card>
      </div>
    </section>

  </div>
</template>

<script>
export default { name: "settings" };
</script>

<script setup>
import { ref, watch, reactive } from "vue";
import HeaderComponent from "@/components/header/index.vue";
import useScroll from "@/hooks/useScroll";
import {Dialog} from "vant"
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
import {useRoute} from "vue-router";
import DetailCard from "@/components/card/detailCard.vue";
const route = useRoute()
console.log(route.params)
// data
const data = new reactive({
  // title
  title: route.params.title,
  isShowDialog: true,
})

// 是否显示
const isShowOverlay = ref(false);
// 关闭弹窗
const handleClose = (value) => {
  console.log(value)
  isShowOverlay.value = false
}

// 标题动画相关的操作

const userGuideCardRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(userGuideCardRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>
.userGuideCard {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;

  section{
    padding: 0 12px;
    .detail-body {
      position: relative;
      top: 40px;
      padding-bottom: 126px;
      padding-top: 14px;
    }
  }
}
.userGuideCard::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
</style>
